<template>
    <div class="page-group">
        <div class="page page-current">
            <header class="bar bar-nav">
                <button class="button button-link button-nav pull-left" @click="back">
                    <span class="icon  icon-chevron-left"></span>
                    返回
                </button>
                <h1 class='title'>结果</h1>
                <a class="button button-link button-nav pull-right" @click="fullScreen">全屏</a>
            </header>
            <div class="content">
                <graphic id="bar" v-ref:bar></graphic>
                <graphic id="line" v-ref:line></graphic>
            </div>
        </div>
    </div>
</template>
<style>
</style>
<script>
    import {mock,home} from '../url-config'
    import Graphic from '../components/EChartGraphics.vue'
    import './mock'
    import {fAjax} from '../util/FAjax'
    import * as FStorage from '../util/FStorage'

    export default{
        components: {Graphic},
        methods: {
            back(){
                window.history.back()
            },
            fullScreen(){
                var option = this.graphicOption
                option.dataZoom = [
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        filterMode: 'empty',
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0],
                        filterMode: 'empty',
                        start: 0,
                        end: 100
                    }
                ]
                FStorage.setSesstionItem('fullGraphics', option)
                this.$router.go({name: 'fullGraphics'})
            },
        },
        data(){
            return {
                list: [],
                graphicOption: {}
            }
        },
        ready(){
            $('.buttons-tab').fixedTab({offset: 45});
            var ctx = this;
            var submit = home.submit
            var params = ctx.$route.query;
            var url = mock() ? submit.mock : submit.server
            fAjax(url, 'get', params, function (data) {
                data = JSON.parse(data)
                ctx.graphicOption = parseData(data);
                ctx.$refs.bar.setOption(ctx.graphicOption)
                ctx.$refs.line.setOption(otherOption())
            })
        }
    }

    function parseData(data) {
        return {
            title: {
                text: '示例图表',
                left: 'center',
            },
            animation: false,
            grid: {
                show: true
            },
            xAxis: {
                data: data.name
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: data.value
            }]
        }
    }

    function otherOption() {
        var data = [];

        for (var i = 0; i <= 360; i++) {
            var t = i / 180 * Math.PI;
            var r = Math.sin(2 * t) * Math.cos(2 * t);
            data.push([r, i]);
        }

        var option = {
            title: {
                text: '极坐标双数值轴'
            },
            legend: {
                data: ['line']
            },
            polar: {
                center: ['50%', '54%']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            angleAxis: {
                type: 'value',
                startAngle: 0
            },
            radiusAxis: {
                min: 0
            },
            series: [{
                coordinateSystem: 'polar',
                name: 'line',
                type: 'line',
                showSymbol: false,
                data: data
            }],
            animationDuration: 2000
        };
        return option;
    }

</script>
